<template>
  <div class="uploader">
    <button @click="btnClick">选择文件</button>
    <button @click="uploadClick">立即上传</button>
    <input
      type="file"
      placeholder="请选择文件"
      ref="fileSelector"
      @change="fileChange"
      multiple
    />
    <div class="image-list">
      <img v-for="(item, i) in this.data.imgList" :key="i" :src="item.base64" />
    </div>
    <div class="log">
      <p v-for="(item, i) in this.data.logs" :key="i">{{ item.log }}</p>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "fileUpload",
  data() {
    return {};
  },
  setup() {
    /*let data = [
      {
        imgList: [{ base64: "cscscs" }, { base64: "cscscs123" }],
        logs: [{ log: "cscscs" }, { log: "cscscs123" }],
        files: [],
      },
    ];*/
    const data = reactive({
      imgList: [],
      logs: [],
      files: [],
    });
    const fileSelector = ref(null);
    const btnClick = () => {
      fileSelector.value.click();
    };
    const fileChange = (e) => {
      let files = e.target.files;
      console.log(files);
      for (let i = 0; i < files.length; i++) {
        let file = files[i];
        console.log(file);
        var fileReader = new FileReader();
        fileReader.addEventListener(
          "load",
          (event) => {
            console.log(event);
            data.imgList.push({
              base64: event.target.result,
            });
            data.files.push(file);
          },
          false
        );
        fileReader.readAsDataURL(file);
      }
    };
    const uploadClick = () => {
      data.files.forEach((file) => {
        uploadServer(file);
      });
    };

    const uploadServer = (file) => {
      console.log(file);
      var form = new FormData();
      form.append("file", file);
      var xhr = new XMLHttpRequest();
      xhr.open("post", "http://139.196.222.182:5000/api/upload");
      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var res = JSON.parse(xhr.responseText);
          console.log("上传成功");
          data.logs.push({
            log: res,
          });
        }
      };
      xhr.upload.onprogress = (event) => {
        if (event.lengthComputable) {
          var percent = (event.loaded / event.total) * 100;
          console.log("上传进度:" + percent);
        }
      };
      xhr.onerror = () => {
        console.log("上传文件错误");
      };
      xhr.ontimeout = () => {
        console.log("上传超时");
      };
      xhr.send(form);
    };
    return {
      data,
      fileSelector,
      btnClick,
      fileChange,
      uploadClick,
      uploadServer,
    };
  },
  methods: {},
  mounted() {
    console.log(this.data);
  },
};
</script>

<style scoped>
.uploader {
  display: inline-block;
}
.uploader button {
  background: #4e6ef2;
  color: aliceblue;
  padding: 5px;
  outline: none;
  border: none;
}
.uploader button:hover {
  opacity: 0.8;
}
.uploader button:active {
  opacity: 1;
}
input {
  display: none;
}
.image-list {
  color: rgb(0, 0, 0);
  margin: 20px;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
}
.log {
  color: rgb(0, 0, 0);
  margin: 20px;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
}
</style>